<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>首页</title>
		<script src="js/layui/layui.js"></script>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<link rel="stylesheet" href="js/layui/css/layui.css" />
		<script type="text/javascript" src="js/AppSetting.js"></script>
	</head>
	<style>
		html,
		body,
		.page {
			height: 100%;
		}
		
		body {
			font: normal 100% Helvetica, Arial, sans-serif;
			margin: 0;
			background-color: #eee;
		}
		
		#carousel {
			padding-bottom: 2rem;
		}
		
		#case,
		#Product,
		#ServiceIdea {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		
		#Product {
			background-color: #fff;
		}
		
		label {
			font-family: '楷体';
			font-size: 2rem;
			padding-top: 2rem;
			padding-bottom: 1rem;
			font-weight: bold;
		}
		
		.ServiceIdea-Item {
			display: flex;
			justify-content: center;
			padding: 1rem;
		}
		
		.ServiceIdea-model {
			margin: 0.2rem;
			padding-top: 4rem;
			background-color: #eee;
		}
		
		.ServiceIdea-model,
		.module-inner {
			width: 21rem;
			height: 22rem;
		}
		
		.module-inner {
			background-color: #fff;
		}
		
		::-webkit-scrollbar {
			width: 0 !important;
		}
		
		.active {
			padding-top: 0;
			padding-bottom: 4rem;
			background-color: #1E9FFF;
		}
		
		.active .module-inner {
			background-color: #1E9FFF!important;
			color: #fff;
		}
		
		.module-title {
			padding: 2rem;
			font-size: 1.5rem;
		}
		
		.module-content {
			padding: 1.5rem;
			line-height: 2rem;
		}
		
		div.polaroid {
			width: 18rem;
			background-color: white;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			margin: 20px 10px;
		}
		
		div.container {
			text-align: center;
			padding: 10px 20px;
		}
		
		.Product-module {
			display: flex;
			flex-wrap: wrap;
		}
		
		.case-module {
			text-align: center;
		}
		
		.case-module img {
			width: 24%;
			height: 10rem;
		}
		
		.footbar {
			display: flex;
			color: #fff;
			background-color: #1E9FFF;
			padding: 2rem 4rem;
		}
		
		.address {
			width: 30rem;
			line-height: 2rem;
		}
		
		.address span,
		.link span {
			font-family: '楷体';
			font-size: 1.5rem;
			font-weight: bold;
		}
		
		.address-p {
			padding: 1rem;
		}
		
		.link-a {
			display: flex;
			flex-flow: row;
			padding: 1rem;
		}
		
		a {
			color: #fff;
			padding: 1rem;
		}
		
		a:hover {
			color: #FF5722;
		}
	</style>

	<body>
		<div class="page">
			<!--
                	作者：offline
                	时间：2018-01-30
                	描述：轮播图
                -->
			<div class="layui-carousel" id="carousel">
				<div carousel-item>
					<img src="img/1.jpg" />
					<img src="img/2.jpg" />
					<img src="img/3.jpg" />
					<img src="img/4.jpg" />
				</div>
			</div>

			<!--
                	作者：offline
                	时间：2018-01-31
                	描述：产品展示
                -->
			<div id="Product">
				<label>产品展示</label>
				<div class="Product-module" id="indexproduct">
					<!--<div class="polaroid">
						<img src="img/1.jpg" alt="Norway" style="width:100%">
						<div class="container">
							<p>产品</p>
						</div>
					</div>-->

				</div>
			</div>

			<!--
                	作者：offline
                	时间：2018-01-30
                	描述：关于拓达
                -->
			<div id="ServiceIdea">
				<label>关于拓达</label>
				<div class="ServiceIdea-Item">
					<div id="ServiceIdea1" class="ServiceIdea-model " onmousemove="MouseOver(this.id)">
						<div class="module-inner ">
							<div class="module-title">
								<span>企业理念</span>
							</div>
							<div class="module-content">
								<p>诚信、踏实、优质、一流！ </p>
								<p>追求卓越无止境、与时俱进创未来！ </p>
								<p>用爱心做事业、用感恩的心做人！ </p>
								<p>为用户创造价值，为企业赢得朋友 ！ </p>
							</div>
						</div>
					</div>
					<div id="ServiceIdea2" class="ServiceIdea-model active" onmousemove="MouseOver(this.id)">
						<div class="module-inner ">
							<div class="module-title">
								<span>服务理念</span>
							</div>
							<div class="module-content">
								<p>精于心，简于行。 </p>
								<p>真诚服务共谋发展。 </p>
								<p>产品的品牌就是品质的象征。 </p>
								<p>践行科学发展观，创新服务无止尽。 </p>
								<p>用心服务，用情服务，用智服务。 </p>
							</div>
						</div>
					</div>
					<div id="ServiceIdea3" class="ServiceIdea-model" onmousemove="MouseOver(this.id)">
						<div class="module-inner ">
							<div class="module-title">
								<span>发展方向</span>
							</div>
							<div class="module-content">
								<p>有缺陷的产品等于废品。</p>
								<p>生产一代，研制一代，构思一代。</p>
								<p>精益求精！ </p>
								<p>高标准，精细化，零缺陷。 </p>
							</div>
						</div>
					</div>
				</div>

			</div>
			<!--
                	作者：offline
                	时间：2018-01-31
                	描述：产品应用
                -->
			<div class="layui-carousel" id="case">
				<label>产品应用</label>
				<div carousel-item id="indexapplication">
					<!--<div class="case-module">
						<img src="img/1.jpg" />
						<img src="img/2.jpg" />
						<img src="img/3.jpg" />
						<img src="img/4.jpg" />
					</div>-->

				</div>
			</div>
			<!--
                	作者：offline
                	时间：2018-01-31
                	描述：联系我们
                -->
			<div class="footbar">
				<div class="address">
					<span>联系我们</span>
					<div class="address-p">
						<p>地址：宁波市镇海骆驼工业区兴业路2号</p>
						<p>郝经理 ：13805889283</p>
						<p>李经理 ：13805881657</p>
						<p>传真：0574-87581936</p>
					</div>

				</div>
				<div class="link">
					<span>相关链接</span>
					<div class="link-a">
						<a href="https://www.baidu.com" target="_blank">百度</a>
					</div>

				</div>
			</div>

		</div>
	</body>

</html>
<script>
	//注意：导航 依赖 element 模块，否则无法进行功能性操作
	layui.use(['element', 'carousel'], function() {
		var element = layui.element,
			carousel = layui.carousel;

		//建造实例
		carousel.render({
			elem: '#carousel',
			width: '100%', //设置容器宽度
			height: '220px',
			arrow: 'always', //始终显示箭头
			anim: 'fade', //切换动画方式
			interval: 10000 //10秒
		});

		//…
		IndexProduct();
		//IndexApplication();
		//产品应用(客户案例)
		ajaxget({
			url: 'api/NBtuodaPublic/GetIndexApplicationList',
			success: function(data) {

				if(data == null) {
					return;
				}
				var list = [];
				var count = data.length;
				if(count > 4) {
					for(i = 0; i < count - 3; i = i + 4) {
						list.push('<div class="case-module">');

						list.push('<img src="' + ApiURL + data[i].ImageUrl + '"/>');
						list.push('<img src="' + ApiURL + data[i + 1].ImageUrl + '"/>');
						list.push('<img src="' + ApiURL + data[i + 2].ImageUrl + '"/>');
						list.push('<img src="' + ApiURL + data[i + 3].ImageUrl + '"/>');

						list.push('</div>');

					}

				} else {
					list.push('<div class="case-module">');
					for(i = 0; i < count; i++) {

						list.push('<img src="' + ApiURL + data[i].ImageUrl + '"/>');

					}
					list.push('</div>');
				}
				var htmldata = list.join('');
				$("#indexapplication").html(htmldata);

				carousel.render({
					elem: '#case',
					width: '100%', //设置容器宽度
					height: '19rem',
					arrow: 'always', //始终显示箭头
					anim: 'fade', //切换动画方式
					indicator: 'none',
					interval: 3000 //3秒
				});

			}
		})
	});

	//产品
	function IndexProduct() {
		ajaxget({
			url: 'api/NBtuodaPublic/GetIndexProductList',
			success: function(data) {

				if(data == null) {
					return;
				}
				var list = [];
				for(i = 0; i < data.length; i++) {
					list.push('<div class="polaroid">');
					list.push('<img src="' + ApiURL + data[i].ImageUrl + '" alt="Norway" style="width:100%;">');
					list.push('<div class="container">');
					list.push('<p>');
					list.push(data[i].Title);
					list.push('</p>');
					list.push('</div>');
					list.push('</div>');

				}
				var htmldata = list.join('');
				$("#indexproduct").html(htmldata);

			}
		})
	}

	function IndexApplication() {

	}

	//鼠标悬停
	function MouseOver(id) {
		$(".ServiceIdea-Item div").removeClass('active');
		$("#" + id).addClass('active');
	}
</script>